<template>
	<view class="content">
		<view class="top flexs2">
			<image class="logo" src="../../static/logo.png"></image>
		</view>
		<view class="cons">
			<view class="cons_top">
				<view class="cons_topa bg-white">
					<view class="list flexs1">
						<image class="icon_img" src="../../static/img/shouji.png"></image>
						<view class="ipts">
							<input placeholder="请输入" class="ipts1" v-model="phone" />
						</view>
					</view>
					<view class="list flexs1">
						<image class="icon_img" src="../../static/img/codes.png"></image>
						<view class="ipts flexs1">
							<input placeholder="输入验证码" class="ipts2" v-model="codes" />
							<view class="small" v-show='stus == true' @click='code'>{{text}}</view>
							<view class='small text-gray' v-show='stus == false'>{{text}}S重新获取</view>
						</view>
					</view>
				</view>
				<view class="btns text-white text-bold text-center" @click="gologin">登录</view>
			</view>
			<view class="bots">
				<view class="text-gray small1">登录注册代表您已阅读并同意用户协议</view>
				<view class="denglu" @click="weixin">一键登录</view>
				<image class="weixin" src="../../static/img/weixin.png" @click="weixin"></image>
			</view>
		</view>
	</view>
</template>

<script>
	// import jweixin from "jweixin-module"
	var jweixin = require('jweixin-module')
	export default {
		data() {
			return {
				sunmax: 60,
				stus: true, //倒计时标识
				phone: '',
				codes: '',
				text: '发送验证码',
				openid: ''
			}
		},
		onLoad(option) {
			if (option.openid) {
				this.openid = option.openid
			} else {
				window.location.href = `http://drycleaner.xzjumeng.com/third/connect/wechat?status=2`;
			}

		},
		methods: {
			//初始化

			gologin() {

				var obj = {
					mobile: this.phone,
					captcha: this.codes,
					openid: this.openid
				}
				this.$common.requests('/api/user/mobilelogin', obj).then(res => {
					if (res.data.code == 1) {
						var data = res.data.data.userinfo;
						uni.setStorageSync('uid', data.user_id);
						uni.setStorageSync('token', data.token);
						uni.setStorageSync('userinfo', data);
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 800);
					}
				})

			},
			//获取验证码
			code() {
				if ((/^1[345789]\d{9}$/.test(this.phone))) {
					this.stus = false;
					this.text = this.sunmax;
					let timeInt = setInterval(() => {
						this.text--
						if (this.text <= 0) {
							this.stus = true;
							this.text = '获取验证码';
							clearInterval(timeInt)
						}
					}, 1000)
					var obj = {
						mobile: this.phone
					}
					this.$common.requests('/api/user/sendSMS', obj).then(res => {
						this.$api.msg(res.data.msg);
					})
				} else {
					this.$api.msg('请输入正确的手机号');
				}
			},
			weixin() {
				// let appid = 'wxc87de76578e23f08';
				// let uri = encodeURIComponent(window.location.href); // 这里务必编码
				// let scope = 'snsapi_userinfo'; // 获取用户信息
				// let scope = 'snsapi_base'; // 静默授权，仅可获取openid
				window.location.href = `http://drycleaner.xzjumeng.com/third/connect/wechat`;
			},
			async configWeiXin(callback) {
				let [errConfig, resConfig] = await api.wxConfig(window.location.href);
				if (resConfig) {
					let apiList = [ // 可能需要用到的能力
						'onMenuShareAppMessage',
						'onMenuShareTimeline',
						'hideOptionMenu',
						'showOptionMenu',
						'chooseWXPay'
					];

					let info = {
						debug: true, // 调试，发布的时候改为false
						appId: 'appid', //公众号的唯一标识
						nonceStr: resConfig.noncestr, //生成签名的随机串
						timestamp: resConfig.timestamp, //生成签名的时间戳
						signature: resConfig.sign, //签名
						jsApiList: apiList //必填，需要使用的JS接口列表
					};
					jweixin.config(info);
					jweixin.error(err => {
						console.log('config fail:', err);
					});
					jweixin.ready(res => {
						if (callback) callback(jweixin); // 配置成功
					});
				}
			},

		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: 100vh;
		background: #F9F9F9;
	}

	.top {
		width: 100%;
		height: 32vh;
		background: #14C7CE;
	}

	.logo {
		width: 150upx;
		height: 150upx;
		border-radius: 50%;
		margin-bottom: 50upx;
	}

	.cons {
		width: 100%;
		height: 50vh;
		position: relative;
		top: -7vh;
		left: 0;
	}

	.cons_top {
		padding: 0 30upx 60upx 30upx;
		position: relative;
		top: 0;
		left: 0;
	}

	.cons_topa {
		width: 100%;
		padding: 50upx;
		height: 400upx;
		border-radius: 20upx;
	}

	.icon_img {
		width: 28upx;
		height: 38upx;
	}

	.ipts {
		width: 85%;
		padding: 30upx 0;
		border-bottom: 1px solid #E6E6E6;
	}

	.ipts1 {
		width: 100%;
		padding-top: 3upx;
	}

	.ipts2 {
		width: 60%;
		padding-top: 3upx;
	}

	.small {
		font-size: 28upx;
	}

	.btns {
		width: 76%;
		padding: 25upx 0;
		background: #14C7CE;
		position: absolute;
		border-radius: 15upx;
		bottom: 0;
		left: 12%;
		font-size: 30upx;
	}

	.bots {
		text-align: center;
	}

	.small1 {
		font-size: 26upx;
		padding: 50upx 0;
	}

	.denglu {
		padding: 60upx 0 50upx 0;
	}

	.weixin {
		width: 60upx;
		height: 50upx;
	}
</style>
